<!-- 选项展示卡 -->
<template>
  <el-card
    class="main"
    @click.native="changeSelectedId"
    :shadow="selectedId == id || setShadowAlways ? 'always' : 'hover'"
    :style="{'--width': width}"
  >
    <div
      slot="header"
      class="header"
    >
      {{ name }}
      <div v-show="loadOperation">
        <el-button
          type="text"
          @click="updateOption"
        >更新</el-button>
        <el-button
          type="text"
          @click="deleteOption"
        >删除</el-button>
      </div>
    </div>
    <div class="body">
      <img
        :src="image"
        class="image"
      />
      <mavon-editor
        v-model="description"
        :subfield="false"
        defaultOpen="preview"
        :editable="false"
        :toolbarsFlag="false"
        class="content"
      />
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    selectedId: Number,
    id: Number,
    name: String,
    image: String,
    description: String,
    width: {
      type: String,
      default: "400px",
    },
    setShadowAlways: {
      type: Boolean,
      default: false,
    },
    loadOperation: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    changeSelectedId() {
      if (this.setShadowAlways) {
        return;
      }

      this.$emit("changeSelectedId", this.id);
    },
    updateOption() {
      if (!this.loadOperation) {
        return;
      }

      this.$emit('updateOption', this.id)
    },
    deleteOption() {
      if (!this.loadOperation) {
        return;
      }

      this.$emit('deleteOption', this.id)
    },
  },
};
</script>

<style scoped>
.main {
  width: var(--width);
  margin: 10px;
}

.header {
  height: 20px;
  line-height: 20px;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.content {
  font-size: 14px;
  color: #5f5f5f;
}
</style>